<template>
    <div>
        <el-row type="flex" justify="space-between">
            <el-col>
                <el-button type="primary" @click="addNewCourse">新增老师</el-button>
            </el-col>
            <el-col>
                <el-input class="clues-manage-search-input" @keyup.enter.native="quickQuery"
                          style="width: 300px;float: right;" placeholder="请输入老师名称" v-model="searchValue"
                          size="small">
                    <el-button  slot="append" icon=""
                                @click.native.prevent="quickQuery">搜索</el-button>
                </el-input>
            </el-col>
        </el-row>
        <div style="margin-top: 30px;">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="老师名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="老师头像"
                        width="180">
                    <template scope="scope">
                        <img :src="scope.row.image_url" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="老师介绍">
                </el-table-column>
                <el-table-column label="操作" width="230">
                    <template scope="scope">
                        <!--{{scope.row}}-->
                        <el-button type="text" size="small" @click="teacherEdit(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 30, 50]" :page-size="number" :current-page="page" layout="total, sizes, prev, pager, next, jumper" :total="teacherListCount" :page-count="10/number">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { ApigetTeacherList } from '../../common/js/api'
    export default {
        data() {
            return {
                teacherListCount:0, // 列表总数
                number: 10,
                page: 1,
                searchValue: '', // 查询value
                tableData: []
            };
        },
        methods: {
            // 查询教师列表
            getTeacherList: function() {
                ApigetTeacherList({
                    keyword: this.searchValue,
                    page: this.page,
                    number: this.number
                }).then(res => {
                    if(res.data.code === 0){
                        this.tableData = res.data.data.Body;
                        this.teacherListCount = res.data.data.totalCount
                    }
                })
            },
            addNewCourse: function(){
                this.$router.push({ path: '/teacheradd' });
            },
            teacherEdit: function (id) {
                this.$router.push({ path: '/teacheredit?id=' + id})
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getTeacherList()
            },
            handleSizeChange(val) {
                this.number = val;
                this.getTeacherList()
            },
            quickQuery() { // 搜索查询
                this.page = 1;
                this.getTeacherList()
            },
        },
        created(){
            this.getTeacherList()
        }
    }

</script>

<style lang="scss" scoped>

</style>
